.e-contact-buttons-var-7{--e-contact-buttons-chat-button-padding-block-end:16px;--e-contact-buttons-chat-button-padding-block-start:16px;--e-contact-buttons-chat-button-padding-inline-end:20px;--e-contact-buttons-chat-button-padding-inline-start:20px;--e-contact-buttons-chat-button-gap:8px;--e-contact-buttons-horizontal-offset:0;--e-contact-buttons-vertical-offset:0}.e-contact-buttons-var-7.has-h-alignment-end .e-contact-buttons__chat-button-container,.e-contact-buttons-var-7.has-h-alignment-start .e-contact-buttons__chat-button-container{padding-inline:0}@media (max-width:ELEMENTOR_SCREEN_MOBILE_MAX){.e-contact-buttons-var-7.has-mobile-full-width{width:100%}.e-contact-buttons-var-7.has-mobile-full-width .e-contact-buttons__chat-button-container{width:100%;max-width:100%}.e-contact-buttons-var-7.has-mobile-full-width .e-contact-buttons__chat-button{width:100%}}.e-contact-buttons-var-7 .e-contact-buttons__chat-button,.e-contact-buttons-var-7 .e-contact-buttons__chat-button:not([href]):not([tabindex]),.e-contact-buttons-var-7 .e-contact-buttons__chat-button[type=button]{border-radius:0;color:var(--e-contact-buttons-button-icon);display:inline-flex;font-size:18px;font-weight:500;gap:var(--e-contact-buttons-chat-button-gap);height:-moz-fit-content;height:fit-content;line-height:28px;padding-block-end:var(--e-contact-buttons-chat-button-padding-block-end);padding-block-start:var(--e-contact-buttons-chat-button-padding-block-start);padding-inline-end:var(--e-contact-buttons-chat-button-padding-inline-end);padding-inline-start:var(--e-contact-buttons-chat-button-padding-inline-start);width:-moz-fit-content;width:fit-content}.e-contact-buttons-var-7 .e-contact-buttons__chat-button:not([href]):not([tabindex]) svg,.e-contact-buttons-var-7 .e-contact-buttons__chat-button[type=button] svg,.e-contact-buttons-var-7 .e-contact-buttons__chat-button svg{height:1em;width:1em}.e-contact-buttons-var-7 .e-contact-buttons__chat-button:focus,.e-contact-buttons-var-7 .e-contact-buttons__chat-button:hover,.e-contact-buttons-var-7 .e-contact-buttons__chat-button:not([href]):not([tabindex]):focus,.e-contact-buttons-var-7 .e-contact-buttons__chat-button:not([href]):not([tabindex]):hover,.e-contact-buttons-var-7 .e-contact-buttons__chat-button[type=button]:focus,.e-contact-buttons-var-7 .e-contact-buttons__chat-button[type=button]:hover{color:var(--e-contact-buttons-button-icon-hover)}import React, { useEffect } from 'react';
import { PhotoIcon, TrashIcon } from '@heroicons/react/24/outline';
import { __ } from '@wordpress/i18n';
import { addFilter } from '@wordpress/hooks';
import { RangeControl } from '@wordpress/components';
import { MediaUpload } from '@wordpress/media-utils';
import { useStateValue } from '../../store/store';
import { getDataUri, sendPostMessage } from '../../utils/functions';
import { initialState } from '../../store/reducer';
// import ToggleSwitch from '../../components/toggle-switch';

const SiteLogo = () => {
	const replaceMediaUpload = () => MediaUpload;
	const [ { siteLogo }, dispatch ] = useStateValue();
	// const [ showTitle, setShowTitle ] = useState( true ),
	// 	toggleTitle = () => setShowTitle( ( prev ) => ! prev );

	addFilter(
		'editor.MediaUpload',
		'core/edit-post/components/media-upload/replace-media-upload',
		replaceMediaUpload
	);

	const onSelectImage = ( media ) => {
		const mediaData = {
			id: media.id,
			url: media.url,
			width: siteLogo.width,
		};

		if ( window.location.protocol === 'http:' ) {
			getDataUri( media.url, function ( data ) {
				mediaData.dataUri = data;
				updateValues( mediaData );
			} );
		} else {
			updateValues( mediaData );
		}
	};

	const dispatchPostMessage = ( action, data ) => {
		sendPostMessage(
			{
				param: action,
				data,
			},
			'astra-starter-templates-preview'
		);
	};

	const updateValues = ( data ) => {
		dispatch( {
			type: 'set',
			siteLogo: data,
		} );

		dispatchPostMessage( 'siteLogo', data );
	};

	const removeImage = () => {
		updateValues( initialState.siteLogo );
	};

	const onWidthChange = ( width ) => {
		const newLogoOptions = {
			...siteLogo,
			width,
		};

		dispatch( {
			type: 'set',
			siteLogo: newLogoOptions,
		} );

		dispatchPostMessage( 'siteLogo', newLogoOptions );
	};

	// const handleOnChangeToggleTitle = () => {
	// 	dispatchPostMessage( 'siteTitle', ! showTitle );
	// 	toggleTitle();
	// };

	useEffect( () => {
		if ( !! astraSitesVars?.isRTLEnabled ) {
			const rangeControl = document.querySelector(
				'.components-range-control__wrapper'
			);
			if ( rangeControl === null ) {
				return;
			}
			// Range control slider styling for RTL.
			const currentValue = rangeControl.children[ 3 ].style.left;
			rangeControl.children[ 3 ].style.marginRight = '-10px';
			rangeControl.children[ 3 ].style.removeProperty( 'margin-left' );
			rangeControl.children[ 3 ].style.right = currentValue;
			rangeControl.children[ 4 ].style.removeProperty( 'transform' );
			rangeControl.children[ 4 ].style.removeProperty( 'left' );
			rangeControl.children[ 4 ].style.right = currentValue;
			rangeControl.children[ 4 ].style.transform = 'translateX(50%)';
		}
	} );

	return (
		<>
			<h5 className="!text-sm !font-semibold !mb-1 !mt-5">Site Logo</h5>
			<MediaUpload
				onSelect={ ( media ) => onSelectImage( media ) }
				allowedTypes={ [ 'image' ] }
				value={ siteLogo.id }
				render={ ( { open } ) => (
					<div className="space-y-3">
						{ !! siteLogo.url && (
							<div className="w-full py-2.5 px-3 flex items-start justify-start gap-3 rounded-md border border-solid border-border-tertiary bg-background-primary">
								<div className="w-full flex items-center justify-between">
									<div className="flex items-center justify-center rounded-sm bg-zip-dark-theme-border p-1">
										<img
											className="w-8 h-8 object-contain"
											alt={ __(
												'Site Logo',
												'astra-sites'
											) }
											src={ siteLogo.url }
										/>
									</div>
									<div className="flex items-center justify-end gap-4">
										<button
											onClick={ open }
											className="inline-flex border-0 focus:outline-none bg-transparent text-sm font-normal cursor-pointer"
										>
											{ __( 'Change', 'astra-sites' ) }
										</button>
										<button
											onClick={ removeImage }
											className="inline-flex border-0 focus:outline-none bg-transparent cursor-pointer"
										>
											<TrashIcon className="h-5 w-5 text-alert-error" />
										</button>
									</div>
								</div>
							</div>
						) }

						{ ! siteLogo.url && (
							<button
								className="w-full py-2.5 px-3 flex items-start justify-start gap-3 rounded-md border border-solid border-border-tertiary cursor-pointer bg-background-primary"
								onClick={ open }
							>
								<PhotoIcon className="h-5 w-5 text-zip-app-inactive-icon" />
								<div className="space-y-5">
									<p className="text-start !text-sm !font-normal !leading-5 !m-0">
										{ __(
											'Upload File Here',
											'astra-sites'
										) }
									</p>
								</div>
							</button>
						) }
						{ /* Enable below code when we add site title in classic templates */ }
						{ /* { siteLogo.url && (
							<div className="flex items-center justify-between gap-2">
								<span className="text-sm font-normal">
									{ __( 'Show site title', 'astra-sites' ) }
								</span>
								<ToggleSwitch
									value={ showTitle }
									onChange={ handleOnChangeToggleTitle }
									requiredClass={
										showTitle
											? 'bg-accent-st-secondary'
											: 'bg-border-tertiary'
									}
								/>
							</div>
						) } */ }

						{ siteLogo.url && (
							<>
								<div className="flex items-center justify-between gap-2">
									<div className="flex-1 text-sm font-normal">
										{ __( 'Logo width', 'astra-sites' ) }
									</div>
									<div className="w-20 [&_.components\-base\-control\_\_field]:mb-0">
										<RangeControl
											className="[&_.components\-range\-control\_\_thumb-wrapper]:border [&_.components\-range\-control\_\_thumb-wrapper]:border-solid [&_.components\-range\-control\_\_thumb-wrapper]:border-white [&_.components\-range\-control\_\_thumb-wrapper]:w-[14px] [&_.components\-range\-control\_\_thumb-wrapper]:h-[14px] [&_.components\-range\-control\_\_thumb-wrapper]:mt-2"
											value={ siteLogo.width }
											min={ 50 }
											max={ 250 }
											step={ 1 }
											onChange={ ( width ) => {
												onWidthChange( width );
											} }
											trackColor="#2563EB"
											color="#2563EB"
											railColor="#FFFFFF"
											disabled={
												'' !== siteLogo.url
													? false
													: true
											}
											withInputField={ false }
										/>
									</div>
									<div className="w-16 flex items-center justify-center gap-1 px-2 py-1 pointer-events-none">
										<span className="text-sm font-normal">
											{ siteLogo.width }
										</span>
										<span className="text-sm font-normal text-zip-app-inactive-icon">
											px
										</span>
									</div>
								</div>
								<hr className="my-6 border-b-0 border-t border-border-tertiary w-full" />
							</>
						) }
					</div>
				) }
			/>
		</>
	);
};

export default SiteLogo;
.elementor-widget.elementor-icon-list--layout-inline .elementor-widget-container{overflow:hidden}.elementor-widget .elementor-icon-list-items.elementor-inline-items{margin-right:-8px;margin-left:-8px}.elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-right:8px;margin-left:8px}.elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{width:auto;left:auto;right:auto;position:relative;height:100%;border-top:0;border-bottom:0;border-right:0;border-left-width:1px;border-style:solid;left:-8px}.elementor-widget .elementor-icon-list-items{list-style-type:none;margin:0;padding:0}.elementor-widget .elementor-icon-list-item{margin:0;padding:0;position:relative}.elementor-widget .elementor-icon-list-item:after{position:absolute;bottom:0;width:100%}.elementor-widget .elementor-icon-list-item,.elementor-widget .elementor-icon-list-item a{display:flex;font-size:inherit;align-items:var(--icon-vertical-align,center)}.elementor-widget .elementor-icon-list-icon+.elementor-icon-list-text{align-self:center;padding-inline-start:5px}.elementor-widget .elementor-icon-list-icon{display:flex;position:relative;top:var(--icon-vertical-offset,initial)}.elementor-widget .elementor-icon-list-icon svg{width:var(--e-icon-list-icon-size,1em);height:var(--e-icon-list-icon-size,1em)}.elementor-widget .elementor-icon-list-icon i{width:1.25em;font-size:var(--e-icon-list-icon-size)}.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon{text-align:var(--e-icon-list-icon-align)}.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon svg{margin:var(--e-icon-list-icon-margin,0 calc(var(--e-icon-list-icon-size, 1em) * .25) 0 0)}.elementor-widget.elementor-list-item-link-full_width a{width:100%}.elementor-widget.elementor-align-center .elementor-icon-list-item,.elementor-widget.elementor-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-align-left .elementor-icon-list-item,.elementor-widget.elementor-align-left .elementor-icon-list-item a{justify-content:flex-end;text-align:left}.elementor-widget.elementor-align-left .elementor-inline-items{justify-content:flex-end}.elementor-widget.elementor-align-right .elementor-icon-list-item,.elementor-widget.elementor-align-right .elementor-icon-list-item a{justify-content:flex-start;text-align:right}.elementor-widget.elementor-align-right .elementor-icon-list-items{justify-content:flex-start}.elementor-widget:not(.elementor-align-right) .elementor-icon-list-item:after{right:0}.elementor-widget:not(.elementor-align-left) .elementor-icon-list-item:after{left:0}@media (min-width:ELEMENTOR_SCREEN_WIDESCREEN_MIN){.elementor-widget.elementor-widescreen-align-center .elementor-icon-list-item,.elementor-widget.elementor-widescreen-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-widescreen-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-widescreen-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-widescreen-align-left .elementor-icon-list-item,.elementor-widget.elementor-widescreen-align-left .elementor-icon-list-item a{justify-content:flex-end;text-align:left}.elementor-widget.elementor-widescreen-align-left .elementor-inline-items{justify-content:flex-end}.elementor-widget.elementor-widescreen-align-right .elementor-icon-list-item,.elementor-widget.elementor-widescreen-align-right .elementor-icon-list-item a{justify-content:flex-start;text-align:right}.elementor-widget.elementor-widescreen-align-right .elementor-icon-list-items{justify-content:flex-start}.elementor-widget:not(.elementor-widescreen-align-right) .elementor-icon-list-item:after{right:0}.elementor-widget:not(.elementor-widescreen-align-left) .elementor-icon-list-item:after{left:0}}@media (max-width:ELEMENTOR_SCREEN_LAPTOP_MAX){.elementor-widget.elementor-laptop-align-center .elementor-icon-list-item,.elementor-widget.elementor-laptop-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-laptop-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-laptop-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-laptop-align-left .elementor-icon-list-item,.elementor-widget.elementor-laptop-align-left .elementor-icon-list-item a{justify-content:flex-end;text-align:left}.elementor-widget.elementor-laptop-align-left .elementor-inline-items{justify-content:flex-end}.elementor-widget.elementor-laptop-align-right .elementor-icon-list-item,.elementor-widget.elementor-laptop-align-right .elementor-icon-list-item a{justify-content:flex-start;text-align:right}.elementor-widget.elementor-laptop-align-right .elementor-icon-list-items{justify-content:flex-start}.elementor-widget:not(.elementor-laptop-align-right) .elementor-icon-list-item:after{right:0}.elementor-widget:not(.elementor-laptop-align-left) .elementor-icon-list-item:after{left:0}}@media (max-width:ELEMENTOR_SCREEN_TABLET_EXTRA_MAX){.elementor-widget.elementor-tablet_extra-align-center .elementor-icon-list-item,.elementor-widget.elementor-tablet_extra-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-tablet_extra-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-tablet_extra-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-tablet_extra-align-left .elementor-icon-list-item,.elementor-widget.elementor-tablet_extra-align-left .elementor-icon-list-item a{justify-content:flex-end;text-align:left}.elementor-widget.elementor-tablet_extra-align-left .elementor-inline-items{justify-content:flex-end}.elementor-widget.elementor-tablet_extra-align-right .elementor-icon-list-item,.elementor-widget.elementor-tablet_extra-align-right .elementor-icon-list-item a{justify-content:flex-start;text-align:right}.elementor-widget.elementor-tablet_extra-align-right .elementor-icon-list-items{justify-content:flex-start}.elementor-widget:not(.elementor-tablet_extra-align-right) .elementor-icon-list-item:after{right:0}.elementor-widget:not(.elementor-tablet_extra-align-left) .elementor-icon-list-item:after{left:0}}@media (max-width:ELEMENTOR_SCREEN_TABLET_MAX){.elementor-widget.elementor-tablet-align-center .elementor-icon-list-item,.elementor-widget.elementor-tablet-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-tablet-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-tablet-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-tablet-align-left .elementor-icon-list-item,.elementor-widget.elementor-tablet-align-left .elementor-icon-list-item a{justify-content:flex-end;text-align:left}.elementor-widget.elementor-tablet-align-left .elementor-inline-items{justify-content:flex-end}.elementor-widget.elementor-tablet-align-right .elementor-icon-list-item,.elementor-widget.elementor-tablet-align-right .elementor-icon-list-item a{justify-content:flex-start;text-align:right}.elementor-widget.elementor-tablet-align-right .elementor-icon-list-items{justify-content:flex-start}.elementor-widget:not(.elementor-tablet-align-right) .elementor-icon-list-item:after{right:0}.elementor-widget:not(.elementor-tablet-align-left) .elementor-icon-list-item:after{left:0}}@media (max-width:ELEMENTOR_SCREEN_MOBILE_EXTRA_MAX){.elementor-widget.elementor-mobile_extra-align-center .elementor-icon-list-item,.elementor-widget.elementor-mobile_extra-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-mobile_extra-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-mobile_extra-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-mobile_extra-align-left .elementor-icon-list-item,.elementor-widget.elementor-mobile_extra-align-left .elementor-icon-list-item a{justify-content:flex-end;text-align:left}.elementor-widget.elementor-mobile_extra-align-left .elementor-inline-items{justify-content:flex-end}.elementor-widget.elementor-mobile_extra-align-right .elementor-icon-list-item,.elementor-widget.elementor-mobile_extra-align-right .elementor-icon-list-item a{justify-content:flex-start;text-align:right}.elementor-widget.elementor-mobile_extra-align-right .elementor-icon-list-items{justify-content:flex-start}.elementor-widget:not(.elementor-mobile_extra-align-right) .elementor-icon-list-item:after{right:0}.elementor-widget:not(.elementor-mobile_extra-align-left) .elementor-icon-list-item:after{left:0}}@media (max-width:ELEMENTOR_SCREEN_MOBILE_MAX){.elementor-widget.elementor-mobile-align-center .elementor-icon-list-item,.elementor-widget.elementor-mobile-align-center .elementor-icon-list-item a{justify-content:center}.elementor-widget.elementor-mobile-align-center .elementor-icon-list-item:after{margin:auto}.elementor-widget.elementor-mobile-align-center .elementor-inline-items{justify-content:center}.elementor-widget.elementor-mobile-align-left .elementor-icon-list-item,.elementor-widget.elementor-mobile-align-left .elementor-icon-list-item a{justify-content:flex-end;text-align:left}.elementor-widget.elementor-mobile-align-left .elementor-inline-items{justify-content:flex-end}.elementor-widget.elementor-mobile-align-right .elementor-icon-list-item,.elementor-widget.elementor-mobile-align-right .elementor-icon-list-item a{justify-content:flex-start;text-align:right}.elementor-widget.elementor-mobile-align-right .elementor-icon-list-items{justify-content:flex-start}.elementor-widget:not(.elementor-mobile-align-right) .elementor-icon-list-item:after{right:0}.elementor-widget:not(.elementor-mobile-align-left) .elementor-icon-list-item:after{left:0}}<div class="centered akismet-box-header">
	<h2>Eliminate spam from your site</h2>
</div>{"code":"rest_no_route","message":"No route was found matching the URL and request method.","data":{"status":404}}